<!--该组件为承保一张图左侧展示区组件-->

<template>
  <!--左侧展示区组件容器-->
  <div class="left-bar-container">
    <!--搜索框组件容器-->
    <div class="select-search-pot">
      <el-input placeholder="请输入承保档案名称" v-model="input3" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="承保类型">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <!--表格组件容器-->
    <div class="dossier-chart-pot">
      <!--应用表格组件并将数据传给表格组件-->
      <DossierChart v-for="listItem in leftBarData" :listItem="listItem"></DossierChart>
    </div>
  </div>
</template>

<script>
import DossierChart from "@/views/business/components/DossierChart/index.vue";

export default {
  name: "LeftBar",
  components: {
    DossierChart
  },
  //采用props完整方式接收父组件underwriteMap传过来的数据
  props: {
    leftBarData: {
      type: Array,  //限定接收到的数据的类型
      default: () => []   //设置默认值
    }
  },
  data() {
    return {
      //定义两个变量用于接收用户输入
      input:'',
      select:''
    }
  }
}
</script>

<style lang="scss" scoped>
  //设置左侧展示区组件容器样式
  .left-bar-container{
    //设置宽高
    width: 80%;  //用于缩进
    height: 100%;
    display: flex;
    flex-direction: column; //设为从上向下排列
    align-items: center;
    //设置搜索框组件容器样式
    .select-search-pot{
      //设置宽高
      width: 100%;
      height: 10%;
      //background: #00a0ff;  //仅用于布局查看
      display: flex;
      align-items: center;
      //设置elm组件相关样式
      //设置背景透明
      ::v-deep.el-input-group__prepend, ::v-deep.el-input-group__append, ::v-deep.el-input__inner{
        background-color:transparent;
        color:#f5f7fa;
        border: 1px solid rgba(131, 158, 203, 1);
        font-size: 12px;
      }



    }
    //设置表格组件容器样式
    .dossier-chart-pot{
      //设置宽高
      width: 100%;
      height: 90%;
      //background: lightpink;  //仅用于布局查看
      display: flex;
      flex-direction: column; //设为从上向下排列
      align-items: center;
    }
  }
</style>
